<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html style="height: 100%">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<title>Mutable Tree</title>
		<script type="text/javascript" src="dorado/boot.js"></script>
		<script type="text/javascript">$import("silk,tree");</script>
		<script type="text/javascript">
			function json2Node(files) {
				var nodes = [];
				jQuery.each(files, function(i, file) {
					nodes.push({
						label: file.name,
						icon: file.isDirectory ? "images/folder.gif" : "images/file.gif",
						hasChild: file.isDirectory,
						data: { id: file.id, isDirectory: file.isDirectory },
					});
				});
				return nodes;
			}
		
			dorado.onInit(function() {				
				var actionEditFile = new dorado.widget.Action({
					caption: "编辑文件属性",
					iconClass: "silk silk-application-view-list",
					disabled: true,
					onExecute: function() {
						var node = tree.get("currentNode");
						dorado.MessageBox.prompt("编辑文件名", {
							defaultText: node.get("label"),
							callback: function(text) {
								node.set("label", text);
							}
						});
					}
				});
				var actionAddDirectory = new dorado.widget.Action({
					caption: "添加子文件夹",
					iconClass: "silk silk-add",
					disabled: true,
					onExecute: function() {
						dorado.MessageBox.prompt("请输入文件夹名", {
							defaultText: "<新建文件夹>",
							callback: function(text) {
								var parentNode = tree.get("currentNode");
								parentNode.expandAsync(function() {
									var node = parentNode.addNode({
										label: text, icon: "images/folder.gif", data: { isDirectory: true }
									});
									tree.set("currentNode", node);
									tree.highlightItem(node);
								});
							}
						});
					}
				});
				var actionAddFile = new dorado.widget.Action({
					caption: "添加子文件",
					iconClass: "silk silk-add",
					disabled: true,
					onExecute: function() {
						dorado.MessageBox.prompt("请输入文件名", {
							defaultText: "<新建文件>",
							callback: function(text) {
								var parentNode = tree.get("currentNode");
								parentNode.expandAsync(function() {
									var node = parentNode.addNode({
										label: text, icon: "images/file.gif"
									});
									tree.set("currentNode", node);
									tree.highlightItem(node);
								});
							}
						});
					}
				});
				var actionRemoveFile = new dorado.widget.Action({
					caption: "删除文件",
					iconClass: "silk silk-delete",
					disabled: true,
					onExecute: function() {
						dorado.MessageBox.confirm("确认要删除此文件吗?", function() {
							tree.get("currentNode").remove();
						})
					}
				});
				
				new dorado.widget.ToolBar({
					renderTo: document.body,
					style: "margin-bottom:12px",
					items: [
						{ action: actionEditFile },
						"-",
						{ action: actionAddDirectory },
						{ action: actionAddFile },
						{ action: actionRemoveFile }
					]
				});
				
				var menu = new dorado.widget.Menu({
					items: [
						{ action: actionEditFile },
						"-",
						{ action: actionAddDirectory },
						{ action: actionAddFile },
						{ action: actionRemoveFile }
					]
				});
				
				var tree = new dorado.widget.Tree({
					renderTo: document.body,
					width: 300, height: 300,
					nodes:  json2Node([
						{ id: "root", name: "demo", isDirectory: true }
					]),
					onReady: function(self) {
						self.get("firstNode").expandAsync();
	
						dorado.TipManager.initTip(self.getDom(), {
			                text: "请尝试在树节点上单击鼠标右键", anchor: "top"
			            });
					},
					beforeExpand: function(self, arg) { 
						var node = arg.node, id = node.get("data.id");
						if (node.get("userData") || !id) {
							arg.callDefault();
						}
						else {
							node.set("userData", true);
							$ajax.request("data/file-structure/" + id + ".js", function(result) {
								node.addNodes(json2Node(result.getJsonData()));
								arg.callDefault();
							});
						}
					},
					onCurrentChange: function(self) {
						var node = self.get("currentNode");
						$group(actionEditFile, actionRemoveFile).set("disabled", node == null || node == self.get("firstNode"));
						$group(actionAddDirectory, actionAddFile).set("disabled", node == null || !node.get("data.isDirectory"));
					},
					onContextMenu: function(self, arg) {
						menu.show({
							position: {
								left: arg.event.pageX,
								top: arg.event.pageY
							}
						});
					}
				});
			});
		</script>
	</head>
	<body></body>
</html>
